<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<script src="js/axios.min.js"></script>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			
			<br><br>
			
			标题：<input type="text" v-model="title"> <br>
			简介：<input type="text" v-model="profile"> <br>
			图片：<input type="file" id="img" > <br>
			操作人：<input type="text" v-model="user"> <br><br>
			
			
			<input type="button" value="发布视频">  <input type="button" value="导入视频信息" @click="add()">
			视频标题：<input type="text"> <input type="button" value="查询"> <input type="button" value="删除">
			<table class="table">
				<tr>
					<td><input type="checkbox"></td>
					<td>视频ID</td>
					<td>视频标题</td>
					<td>视频简介</td>
					<td>缩略图</td>
					<td>最后操作时间</td>
					<td>操作人</td>
					<td>操作</td>
				</tr>
				
				<tr v-for="(v,i) in videos">
					<td><input type="checkbox"></td>
					<td>{{v.v_id}}</td>
					<td>{{v.title}}</td>
					<td>{{v.profile}}</td>
					<td><img :src="v.img" width="150px"></td>
					<td>{{v.times}}</td>
					<td>{{v.user}}</td>
					<td><a href="#">上传视频<br><a href="#">视频编辑</a></a></td>
				</tr>
			</table>
		</div>
	</body>
</html>
<script>
var app =new Vue({
	el:"#app",
	data:{
		videos:[],
		title:"",
		img:"",
		user:"",
		profile:"",
		
	},methods:{
		add(){
			var data =new FormData()
			img=document.getElementById("img").files[0]
			data.append("title",this.title)
			data.append("profile",this.profile)
			data.append("img",img)
			data.append("user",this.user)
			axios.post("http://127.0.0.1:8080/video/add",data).then(function(res){
				alert(res.data.msg)
				location.reload()
			} )
		}, //
		
	},created:function(){
		axios.get("http://127.0.0.1:8080/video/list").then(function(res){
			console.log(res.data.data)
			app.videos=res.data.data
		} )
	}
})
</script>